<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XX医药集散中心物流能力展示</title>
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/iview-style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="head">
                <h1>XX医药集散中心实时物流情况</h1>
            </div>
            <div class="page2-div1">
                <div class="page2-div1-left bg-part wrap-div">
                    <p :class="[blue,erect_line]">处理中订单分部一览</p>
                    <div id="order-part" style="width: 100%;height:98%"></div>
                    <div class="bg-part2"></div>
                </div>
                <div class="page2-div1-middle bg-part  wrap-div">
                    <p :class="[blue,erect_line]">配送时长占比</p>
                    <div id="delivery-time" style="width: 100%;height:98%"></div>
                    <div class="bg-part2"></div>
                </div>
                <div class="page2-div1-right bg-part  wrap-div">
                    <p :class="[blue,erect_line]">回单情况</p>
                    <div id="receipt-form" style="width: 100%;height:98%"></div>
                    <div class="bg-part2"></div>
                </div>
            </div>

            <div class="page2-div2">
                <div class="page2-div2-left">
                    <div class="wrap-middle-pho">
                        <div class="bg-part outgoing-dynamic wrap-div">
                            <p :class="[blue,erect_line]">出入库动态一览</p>
                            <div id="outgoing" style="width: 100%;height:98%"></div>
                            <div class="bg-part2"></div>
                        </div>
                        <div class="bg-part throughput wrap-div">
                            <p :class="[blue,erect_line]">吞吐状况一览</p>
                            <div id="throughputs" style="width: 100%;height:98%"></div>
                            <div class="bg-part2"></div>
                        </div>
                    </div>
                    <div>
                        <div class="bg-part error-detail wrap-div">
                            <p :class="[blue,erect_line]">异常信息明细</p>
                            <div>
                                <tabs :value="tabName" :animated="false" @on-click="getAllDatas">
                                    <tab-pane label="全部异常" name="name1">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide" v-for="total_item in total">
                                                    <row v-if="total_item.name=='冷冻仓异常'">
                                                        <i-col span="6">
                                                            <p class="total1-error totals-error">{{total_item.name}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total1-error-2"><span
                                                                    v-if="total_item.isnew">【新】</span>{{total_item.city}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="template total1-error-3">{{total_item.tem}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total1-error-2">{{total_item.time}}</p>
                                                        </i-col>
                                                    </row>
                                                    <row v-if="total_item.name=='冷藏仓异常'">
                                                        <i-col span="6">
                                                            <p class="total2-error totals-error">{{total_item.name}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total2-error-2"><span
                                                                    v-if="total_item.isnew">【新】</span>{{total_item.city}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="template total2-error-3">{{total_item.tem}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total2-error-2">{{total_item.time}}</p>
                                                        </i-col>
                                                    </row>
                                                    <row v-if="total_item.name=='温度异常'">
                                                        <i-col span="6">
                                                            <p class="total3-error totals-error">{{total_item.name}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total3-error-2"><span
                                                                    v-if="total_item.isnew">【新】</span>{{total_item.city}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class=" template total3-error-3">{{total_item.tem}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total3-error-2">{{total_item.time}}</p>
                                                        </i-col>
                                                    </row>
                                                    <row v-if="total_item.name=='阴凉异常'">
                                                        <i-col span="6">
                                                            <p class="total4-error totals-error">{{total_item.name}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total4-error-2"><span
                                                                    v-if="total_item.isnew">【新】</span>{{total_item.city}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="template total4-error-3">{{total_item.tem}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total4-error-2">{{total_item.time}}</p>
                                                        </i-col>
                                                    </row>
                                                </div>
                                            </div>
                                        </div>
                                    </tab-pane>
                                    <tab-pane :label="coolerror" name="name2">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide" v-for="freeze_item in freeze"
                                                    v-if="freeze.length">
                                                    <row>
                                                        <i-col span="6">
                                                            <p class="total1-error totals-error">{{freeze_item.name}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total1-error-2">
                                                                <span
                                                                    v-if="freeze_item.isnew">【新】</span>{{freeze_item.city}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="template total1-error-3">{{freeze_item.tem}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total1-error-2">{{freeze_item.time}}</p>
                                                        </i-col>
                                                    </row>
                                                </div>
                                            </div>
                                        </div>
                                    </tab-pane>
                                    <tab-pane label="冷藏仓异常" name="name3">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide" v-for="refrigeration_item in refrigeration"
                                                    v-if="refrigeration.length">
                                                    <row>
                                                        <i-col span="6">
                                                            <p class="total2-error totals-error">
                                                                {{refrigeration_item.name}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total2-error-2"><span
                                                                    v-if="refrigeration_item.isnew">【新】</span>{{refrigeration_item.city}}
                                                            </p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="template total2-error-3">
                                                                {{refrigeration_item.tem}}</p>
                                                        </i-col>
                                                        <i-col span="6">
                                                            <p class="total2-error-2">{{refrigeration_item.time}}</p>
                                                        </i-col>
                                                    </row>
                                                </div>
                                            </div>
                                        </div>
                                    </tab-pane>
                                    <tab-pane label="在途温度异常" name="name4">标签四的内容</tab-pane>
                                    <tab-pane label="阴凉异常" name="name5">标签五的内容</tab-pane>
                                    <tab-pane label="订单异常" name="name6">标签六的内容</tab-pane>
                                    <tab-pane label="设备异常" name="name7">标签七的内容</tab-pane>
                                    <tab-pane label="接口异常" name="name8">标签八的内容</tab-pane>
                                </tabs>
                            </div>
                            <div class="bg-part2"></div>
                        </div>
                    </div>
                </div>
                <div class="page2-div2-right bg-part wrap-div" ref="divW">
                    <p :class="[blue,erect_line]">服务质量KPI</p>
                    <div id="service-quality" style="width: 100%;height:90%"></div>
                    <div class="bg-part2"></div>
                </div>
            </div>

            <div class="foot"> Copyright © 2006-2015 深圳传世般若科技有限公司 </div>
        </div>


    </div>

    <script src="../src/js/vue.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script src="../src/js/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                freeze: [],
                refrigeration: [],
                total: [],
                div2_left_p: 'div2-left-p',
                div2_p: 'div2-p',
                div2_right_p: 'div2-right-p',
                blue: 'blue',
                erect_line: 'erect-line',
                display_1_right: 'display-1-right',
                servicequality: [
                    { name: "准时送达率", value: "95", value2: "5" },
                    { name: "差错退回率", value: "95", value2: "5" },
                    { name: "包装完好率", value: "95", value2: "5" },
                    { name: "破损率", value: "95", value2: "5" },
                    { name: "货物提取准时率", value: "95", value2: "5" },
                    { name: "运输过程可追溯率", value: "95", value2: "5" },
                    { name: "客户投诉率", value: "95", value2: "5" },
                    { name: "冷链温控合格率", value: "95", value2: "5" },
                ],
                coolerror: (h) => {
                    return h('div', [
                        h('span', '冷冻仓异常'),
                        h('Badge', {
                            props: {
                                count: 5
                            }
                        })
                    ])
                },
                tabName: 'name1'
            },
            methods: {
                getAllDatas(val) {
                    console.log(val)
                    let self = this;
                    self.tabName = val;

                    axios.get("static/mock/total.json").then((res) => {
                        console.log(res.data)
                        // if (res.data) {
                        //     const data = res.data;
                        //     this.total = data.total;
                        // }
                        self.total = res.data.total;
                        self.freeze = res.data.freeze;
                        self.refrigeration = res.data.refrigeration;

                        console.log(123);
                        self.$nextTick(() => {
                            self.swiper = new Swiper('.swiper-container', {
                                // autoplay: true,//可选选项，自动滑动
                                autoplay: {
                                    delay: 2500,
                                    disableOnInteraction: false
                                },
                                direction: 'vertical',
                                loop: false,
                                // observer: true,
                                // observerParents: true,
                                slidesPerView: 4,
                                sildesPerGroup: 1,
                                // loopedSlides: 4
                            });
                        });
                    })
                },
                Servicequalitys() {
                    let service_quality = echarts.init(document.getElementById('service-quality'));

                    var option4 = {
                        title: [{
                            text: '准时送达率',
                            x: '11%',
                            y: '21%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '差错退回率',
                            x: '61%',
                            y: '21%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '包装完好率',
                            x: '11%',
                            y: '46%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '破损率',
                            x: '65.5%',
                            y: '46%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '货物提取准时率',
                            x: '6.5%',
                            y: '70%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '运输过程可追溯率',
                            x: '54%',
                            y: '70%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '客户投诉率',
                            x: '10%',
                            y: '95%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }, {
                            text: '冷链温控合格率',
                            x: '56%',
                            y: '95%',
                            textStyle: {
                                fontSize: document.body.clientWidth > 1600 ? 16 : 10,
                                color: '#fff'
                            }
                        }],
                        tooltip: {},
                        series: [{
                            type: 'pie',
                            data: [{
                                value: this.servicequality[0].value, itemStyle: {
                                    color: 'rgb(103, 219, 255)',
                                }
                            }, {
                                value: this.servicequality[0].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],

                            center: ['25%', '12%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    formatter: x => {
                                        return `${this.servicequality[0].value}%`
                                    },
                                    color: 'rgb(103, 219, 255)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }, {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[1].value, itemStyle: {
                                    color: 'rgb(83, 131, 236)',
                                }
                            }, {
                                value: this.servicequality[1].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['75%', '12%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    formatter: x => {
                                        return `${this.servicequality[1].value}%`
                                    },
                                    color: 'rgb(83, 131, 236)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }, {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[2].value, itemStyle: {
                                    color: 'rgb(103, 219, 255)',
                                }
                            }, {
                                value: this.servicequality[2].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['25%', '37%'],
                            name: '访问来源',
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    formatter: x => {
                                        return `${this.servicequality[2].value}%`
                                    },
                                    color: 'rgb(103, 219, 255)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }, {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[3].value, itemStyle: {
                                    color: 'rgb(83, 131, 236)',
                                }
                            }, {
                                value: this.servicequality[3].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['75%', '37%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    formatter: x => {
                                        return `${this.servicequality[3].value}%`
                                    },
                                    color: 'rgb(83, 131, 236)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        },
                        {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[4].value, itemStyle: {
                                    color: 'rgb(103, 219, 255)',
                                }
                            }, {
                                value: this.servicequality[4].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['25%', '62%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: x => {
                                        return `${this.servicequality[4].value}%`
                                    },
                                    position: 'center',
                                    color: 'rgb(103, 219, 255)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }, {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[5].value, itemStyle: {
                                    color: 'rgb(103, 219, 255)',
                                }
                            }, {
                                value: this.servicequality[5].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['75%', '62%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: x => {
                                        return `${this.servicequality[5].value}%`
                                    },
                                    position: 'center',
                                    color: 'rgb(103, 219, 255)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }, {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[6].value, itemStyle: {
                                    color: 'rgb(83, 131, 236)',
                                }
                            }, {
                                value: this.servicequality[6].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['25%', '87%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: x => {
                                        return `${this.servicequality[6].value}%`
                                    },
                                    position: 'center',
                                    color: 'rgb(83, 131, 236)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }, {
                            type: 'pie',
                            data: [{
                                value: this.servicequality[7].value, itemStyle: {
                                    color: 'rgb(83, 131, 236)',
                                }
                            }, {
                                value: this.servicequality[7].value2, itemStyle: {
                                    color: 'rgb(32, 30, 55)'
                                }
                            }],
                            center: ['75%', '87%'],
                            radius: ['14%', '20%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: x => {
                                        return `${this.servicequality[7].value}%`
                                    },
                                    position: 'center',
                                    color: 'rgb(83, 131, 236)'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }]
                    };
                    service_quality.setOption(option4);
                    this.service_quality = service_quality;
                },

                Throughput() {
                    var throughput = echarts.init(document.getElementById('throughputs'))
                    option4 = {
                        legend: {},
                        tooltip: {
                            trigger: 'axis',
                            showContent: false
                        },
                        legend: {
                            icon: 'circle',
                            left: 'right',
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        dataset: {
                            source: [
                                ['product', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24', '26', '28', '30'],
                                ['发单量', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 41.1, 30.4, 65.1, 88],
                                ['三方承运', 86.5, 120, 85.7, 83.1, 73.4, 55.1, 24.1, 67.2, 79.5, 86.4, 65.2, 82.5, 24.1, 67.2, 79.5, 86.4],
                                ['接单量', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5, 24.1, 67.2, 79.5, 86.4, 65.2, 82.5, 24.1, 67.2, 79.5, 65.2],
                                ['自有承运', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1, 69.2, 72.4, 53.9, 39.1, 55.2, 67.1, 69.2, 72.4, 53.9, 20]
                            ]
                        },
                        // xAxis: { type: 'category' },
                        // yAxis: { gridIndex: 0 },
                        xAxis: {
                            type: 'category',
                            // data: ['验收中', '上架中', '拣货中', '复核中'],
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: document.body.clientWidth > 1700 ? 16 : 12
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',
                                    width: '1'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    // fontSize: window.screen.width>1700?14:6
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            { type: 'line', smooth: true, seriesLayoutBy: 'row', symbol: 'none', color: 'rgb(83, 131, 236)' },
                            { type: 'line', smooth: true, seriesLayoutBy: 'row', symbol: 'none', color: 'rgb(103, 219, 255)' },
                            { type: 'line', smooth: true, seriesLayoutBy: 'row', symbol: 'none', color: 'rgb(171, 133, 219)' },
                            { type: 'line', smooth: true, seriesLayoutBy: 'row', symbol: 'none', color: 'rgb(174, 222, 228)' },
                        ]
                    }
                    throughput.setOption(option4);
                    this.throughput = throughput;
                },

                Outgoing() {
                    var outgoing = echarts.init(document.getElementById('outgoing'))
                    let data = [160, 140, 160, 140];

                    var option4 = {
                        tooltip: {
                            trigger: 'item'
                        },
                        xAxis: {
                            data: ['验收中', '上架中', '拣货中', '复核中'],
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: document.body.clientWidth > 1700 ? 16 : 12
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',
                                    width: '1'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    // fontSize: window.screen.width>1700?14:6
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                data: data,
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [20, 20, 0, 0],
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                { offset: 0, color: '#6ad2fd' },
                                                { offset: 1, color: '#5a63fe' }
                                            ]
                                        ),
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: function (x) {
                                                return `${(data[x.dataIndex])}件`
                                            },
                                            color: '#fff'
                                        }
                                    }
                                },
                                barWidth: 30,
                                barGap: '-100%',

                            }]
                    };

                    outgoing.setOption(option4);
                    this.outgoing = outgoing;
                },

                Receipt_form() {
                    var receipt_form = echarts.init(document.getElementById('receipt-form'))

                    let datatotal = [560, 603, 500];
                    let dataShadow = [];
                    let data = [360, 280, 480];
                    let percent = [80, 20, 50];
                    let yMax = 100;

                    for (var i = 0; i < data.length; i++) {
                        dataShadow.push(yMax);
                    }

                    var option3 = {
                        tooltip: {
                            trigger: 'item'
                        },
                        xAxis: {
                            // type: 'category',
                            data: ['9月', '10月', '11月'],
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',//坐标值得具体的颜色
                                    fontSize: document.body.clientWidth > 1700 ? 16 : 12
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            show: false,
                        },
                        series: [{
                            type: 'bar',
                            data: dataShadow,
                            barGap: 50,
                            // barCategoryGap: 100,
                            barWidth: 30,
                            itemStyle: {
                                normal: {
                                    color: 'rgb(26, 38, 49)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        // formatter: '{c}',
                                        formatter: x => {
                                            return `${(datatotal[x.dataIndex])}单`
                                        },
                                        color: '#fff',
                                        fontSize: document.body.clientWidth > 1700 ? 12 : 10
                                    }
                                }
                            },
                            silent: true,
                        },
                        {
                            data: percent,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [20, 20, 0, 0],
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#6ad2fd' },
                                            { offset: 1, color: '#5a63fe' }
                                        ]
                                    ),
                                    label: {
                                        show: true,
                                        position: ['-160%', '0%'],
                                        rotate: '30',
                                        // distance: '300px',
                                        // formatter:'{c}/100%',
                                        // formatter:function(a,b,c){return c/1000+"%";},
                                        formatter: function (x) {
                                            return `${(data[x.dataIndex])}/${percent[x.dataIndex]}%`
                                        },
                                        color: '#fff'
                                    }
                                }
                            },
                            // barGap:20,
                            barWidth: 30,
                            barGap: '-100%',

                        }]
                    };

                    receipt_form.setOption(option3);
                    this.receipt_form = receipt_form;
                },

                deliveryTime() {
                    var delivery_time = echarts.init(document.getElementById('delivery-time'))
                    option2 = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: '70%',
                            y: 'middle',
                            icon: "rect",
                            itemWidth: 10,  // 设置宽度
                            itemHeight: 10, // 设置高度
                            itemGap: 10,// 设置间距
                            textStyle: {
                                color: '#fff',
                                fontSize: document.body.clientWidth > 1700 ? 16 : 12
                            },
                            data: [
                                '24小时内送达', '3日内送达', '5日内送达', '5日外送达']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                data: [this.servicequality[0].value, this.servicequality[0].value2],
                                radius: '55%',
                                center: ['35%', '50%'],
                                startAngle: -50, //起始角度
                                label: {
                                    formatter: '{d}%',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: document.body.clientWidth > 1700 ? 16 : 12
                                    },
                                },
                                labelLine: {
                                    lineStyle: {
                                        type: 'dashed',
                                        color: 'rgb(13, 63, 98)'
                                    }
                                },
                                data: [
                                    {
                                        value: 700, name: '24小时内送达', itemStyle: {
                                            color: 'rgb(83, 131, 236)'
                                        }
                                    },
                                    {
                                        value: 90, name: '3日内送达', itemStyle: {
                                            color: 'rgb(171, 133, 219)'
                                        }
                                    },
                                    {
                                        value: 60, name: '5日内送达', itemStyle: {
                                            color: 'rgb(175, 222, 228)'
                                        }
                                    },
                                    {
                                        value: 150, name: '5日外送达', itemStyle: {
                                            color: 'rgb(103, 219, 255)'
                                        }
                                    }
                                ],
                                itemStyle: {
                                    emphasis: {
                                        // shadowBlur: 10,
                                        // shadowOffsetX: 0,
                                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]

                    };
                    delivery_time.setOption(option2);
                    this.delivery_time = delivery_time;
                },

                LinePart() {
                    var order_part = echarts.init(document.getElementById('order-part'))
                    let data = [16000, 14000, 253000, 6000, 70000];

                    var option1 = {
                        tooltip: {
                            trigger: 'item'
                        },
                        xAxis: {
                            data: ['待受理', '待调度', '待配送', '在途中', '待回单'],
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: document.body.clientWidth > 1700 ? 16 : 12
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',
                                    width: '1'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    // fontSize: window.screen.width>1700?14:6
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                data: data,
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [20, 20, 0, 0],
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                { offset: 0, color: '#6ad2fd' },
                                                { offset: 1, color: '#5a63fe' }
                                            ]
                                        ),
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: function (x) {
                                                return `${(data[x.dataIndex] / 10000).toFixed(1)}万件`
                                            },
                                            color: '#fff'
                                        }
                                    }
                                },
                                barWidth: 30,
                                barGap: '-100%',

                            }]
                    };

                    order_part.setOption(option1);
                    this.order_part = order_part;
                },

                changeLine() {
                    window.onresize = () => {
                        this.order_part && this.order_part.resize();
                        this.delivery_time && this.delivery_time.resize();
                        this.receipt_form && this.receipt_form.resize();
                        this.outgoing && this.outgoing.resize();
                        this.throughput && this.throughput.resize();
                        this.service_quality && this.service_quality.resize();
                        let Swidth = document.body.clientWidth;
                        let Sheight = document.body.clientHeight;
                        // console.log(Swidth)
                        if (Swidth < 1730) {
                            if (Swidth < 1500) {
                                this.div2_p = "div2-p-1"
                                this.erect_line = "erect-line1"
                                this.display_1_right = "display-1-right-1"
                            }
                            else {
                                this.div2_p = "div2-p-1"
                            }
                        }
                        else if (Sheight < 840) {
                            this.div2_p = "div2-p-1"
                            this.erect_line = "erect-line1"
                            this.display_1_right = "display-1-right-1"
                        }
                        else {
                            this.div2_p = "div2-p"
                            this.erect_line = "erect-line"
                            this.display_1_right = "display-1-right"
                        }
                    }
                },

                getAllEchart() {
                    this.changeLine();
                    this.LinePart();
                    this.deliveryTime();
                    this.Receipt_form();
                    this.Outgoing();
                    this.Throughput();
                    this.Servicequalitys();
                },
            },
            mounted() {
                this.getAllEchart();

                this.getAllDatas("name1");
            },
            created() {
                let Swidth = document.body.clientWidth;
                let Sheight = document.body.clientHeight;
                if (Swidth < 1730) {
                    if (Swidth < 1500) {
                        this.div2_p = "div2-p-1"
                        this.erect_line = "erect-line1"
                        this.display_1_right = "display-1-right-1"
                    }
                    else {
                        this.div2_p = "div2-p-1"
                    }
                }
                else if (Sheight < 840) {
                    this.div2_p = "div2-p-1"
                    this.erect_line = "erect-line1"
                    this.display_1_right = "display-1-right-1"
                }
                else {
                    this.div2_p = "div2-p"
                    this.erect_line = "erect-line"
                    this.display_1_right = "display-1-right"
                }
            }
        })

    </script>
</body>

</html>